<template>
  <ElTable class="list-table is-border" :="$attrs" border :span-method="spanMethod" :data="list">
    <ElTableColumn prop="_index" label="#" :width="50" align="center" />

    <!-- <ElTableColumn prop="rowspan1" label="#" :width="50" align="center"/>
    <ElTableColumn prop="colspan1" label="#" :width="50" align="center"/>
    <ElTableColumn prop="rowspan2" label="#" :width="50" align="center"/>
    <ElTableColumn prop="colspan2" label="#" :width="50" align="center"/> -->

    <ElTableColumn v-if="!hiddenColumns.has('customerLvl')" label="客户等级" prop="customerLvl" :min-width="120"
      sortable="custom">
      <template #default="{ row }">
        <ElLink type="primary" link @click="$emit('show-customer-level', row)">{{ row.customerLvl }}</ElLink>
      </template>
    </ElTableColumn>

    <ElTableColumn v-if="!hiddenColumns.has('customerName')" label="客户名称" prop="customerName" show-overflow-tooltip
      :min-width="160">
      <template #default="{ row }">
        <ElLink type="primary" link @click="$emit('show-custom-detail', row)">{{ row.customerName }}</ElLink>
      </template>
    </ElTableColumn>

    <ElTableColumn v-if="!hiddenColumns.has('marketTypeName')" label="营销类型" prop="marketTypeName" :min-width="90">
    </ElTableColumn>

    <ElTableColumn v-if="!hiddenColumns.has('expandTypeName')" label="拓客渠道" prop="expandTypeName" :min-width="140">
    </ElTableColumn>
    <ElTableColumn v-if="!hiddenColumns.has('platformName')" label="平台" prop="platformName" :min-width="100">
    </ElTableColumn>
    <!-- <ElTableColumn label="店铺ID" prop="shopNo" :min-width="180"></ElTableColumn> -->
    <ElTableColumn v-if="!hiddenColumns.has('shopName')" label="店铺名称" prop="shopName" show-overflow-tooltip
      :min-width="160">
      <template #default="{ row }">
        <ElLink type="primary" link @click="$emit('go-shop', row)">{{ row.shopName }}</ElLink>
      </template>
    </ElTableColumn>
    <ElTableColumn v-if="!hiddenColumns.has('shopTypeName')" label="店铺类别" prop="shopTypeName" show-overflow-tooltip
      :min-width="160"></ElTableColumn>
    <ElTableColumn v-if="!hiddenColumns.has('shopGroup')" label="店铺分组" prop="shopGroup" :min-width="120">
    </ElTableColumn>
    <ElTableColumn v-if="!hiddenColumns.has('firstStartDate')" label="首次服务日期" prop="firstStartDate" :min-width="140"
      sortable="custom"></ElTableColumn>
    <ElTableColumn v-if="!hiddenColumns.has('startDate')" label="开始日期" prop="startDate" :min-width="120"
      sortable="custom">
    </ElTableColumn>
    <ElTableColumn v-if="!hiddenColumns.has('endDate')" label="结束日期" prop="endDate" :min-width="120" sortable="custom">
    </ElTableColumn>
    <!-- 剔除退款 -->
    <ElTableColumn v-if="!hiddenColumns.has('customTypeName')" label="客服类型" prop="customTypeName" show-overflow-tooltip
      :min-width="160" sortable="custom"></ElTableColumn>
    <ElTableColumn v-if="!hiddenColumns.has('feeModel')" label="收费模式" prop="feeModel"
      :formatter="(_, __, cellValue) => getFeeModel(cellValue)" :min-width="90"></ElTableColumn>
    <ElTableColumn v-if="!hiddenColumns.has('baseSalary')" label="底薪（元）" prop="baseSalary" :min-width="130"
      sortable="custom"></ElTableColumn>
    <ElTableColumn v-if="!hiddenColumns.has('commission')" label="提成（%）" prop="commission" :min-width="130">
      <template #default="{ row }">
        <span>{{ row.commission || 0 }}%</span>
      </template>
    </ElTableColumn>
    <ElTableColumn v-if="!hiddenColumns.has('storeLiaison')" label="店铺对接人" prop="storeLiaison" :min-width="130">
    </ElTableColumn>

    <ElTableColumn v-if="!hiddenColumns.has('excludingRefunds')" label="剔除退款" prop="excludingRefunds" :min-width="130"
      sortable="custom" :formatter="row => row.excludingRefunds === 1 ? '是' : row.excludingRefunds === 0 ? '否' : ''">
    </ElTableColumn>
    <ElTableColumn v-if="!hiddenColumns.has('createUserName')" label="录入人" prop="createUserName" :min-width="130"
      sortable="custom"></ElTableColumn>




    <ElTableColumn prop="_action" label="客户操作" fixed="right" :min-width="90">
      <template #default="{ row }">
        <el-dropdown v-if="auth.has('edit') || auth.has('add') || auth.has('delete')">
          <ElButton link type="primary" class="el-dropdown-link">
            客户管理
          </ElButton>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item v-if="auth.has('edit')">
                <ElButton type="primary" link @click="$emit('edit-custom', row)">编辑客户</ElButton>
              </el-dropdown-item>
              <el-dropdown-item v-if="auth.has('add')">
                <ElButton type="primary" link @click="$emit('add-shop', row)">新增店铺</ElButton>
              </el-dropdown-item>
              <el-dropdown-item v-if="auth.has('delete')">
                <ElButton type="primary" link @click="$emit('delete-custom', row)">删除客户
                </ElButton>
              </el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
        <!--        <ElButton type="primary" v-if="row.shopId && auth.has('edit')" link @click="$emit('edit-custom', row)">-->
        <!--          编辑客户-->
        <!--        </ElButton>-->
        <!--        <ElButton type="primary" v-if="auth.has('add')" link @click="$emit('add-shop', row)">新增店铺</ElButton>-->
        <!--        <ElButton type="primary" v-if="auth.has('delete')" link @click="$emit('delete-custom', row)">删除客户</ElButton>-->
      </template>
    </ElTableColumn>
    <ElTableColumn label="店铺操作" fixed="right" :min-width="134">
      <template #default="{ row }">
        <ElButton style="margin-right: 10px" type="primary" v-if="row.shopId && auth.has('copy')" link
          @click="$emit('copy2', row)">复制
        </ElButton>

        <!--        v-if="auth.has('edit') && auth.has('stop') && auth.has('notice') && auth.has('change')"-->
        <el-dropdown
          v-if="row.shopId && (auth.has('edit') || auth.has('add-sub') || auth.has('stop') || auth.has('notice') || auth.has('change')) || auth.has('view-sub')">
          <ElButton link type="primary" class="el-dropdown-link">
            店铺管理
          </ElButton>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item v-if="row.shopId && auth.has('edit')">
                <ElButton type="primary" link @click="$emit('edit-shop', row)">编辑店铺</ElButton>
              </el-dropdown-item>
              <el-dropdown-item v-if="row.shopId && auth.has('add-sub')">
                <ElButton type="primary" link @click="$emit('add-sub-account', row)">添加子账号</ElButton>
              </el-dropdown-item>
              <el-dropdown-item v-if="row.shopId && auth.has('stop')">
                <ElButton type="primary" link @click="$emit('stop-cooperation', row)">
                  停止合作
                </ElButton>
              </el-dropdown-item>
              <el-dropdown-item v-if="row.shopId && auth.has('notice')">
                <ElButton type="primary" link @click="$emit('stop-notice', row)">
                  到期通知
                </ElButton>
              </el-dropdown-item>
              <el-dropdown-item v-if="row.shopId && auth.has('change')">
                <ElButton type="primary" link @click="$emit('change-log', row)">
                  改动记录
                </ElButton>
              </el-dropdown-item>
              <el-dropdown-item v-if="row.shopId && auth.has('view-sub')">
                <ElButton type="primary" link @click="$emit('view-sub', row)">
                  查看子账号
                </ElButton>
              </el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>

        <!--        <ElButton type="primary" v-if="row.shopId && auth.has('edit')" link @click="$emit('edit-shop', row)">编辑店铺
                </ElButton>-->
        <!--        <ElButton type="primary" v-if="row.shopId && auth.has('stop')" link @click="$emit('stop-cooperation', row)">
                  停止合作
                </ElButton>
                <ElButton type="primary" v-if="row.shopId && auth.has('notice')" link @click="$emit('stop-notice', row)">
                  到期通知
                </ElButton>-->
        <!--        <ElButton type="primary" v-if="row.shopId && auth.has('copy')" link @click="$emit('copy', row)">复制</ElButton>-->
        <!--        <ElButton type="primary" v-if="row.shopId && auth.has('change')" link @click="$emit('change-log', row)">-->
        <!--          改动记录-->
        <!--        </ElButton>-->
      </template>
    </ElTableColumn>
  </ElTable>
</template>

<script setup lang="ts">
import { ElTableColumn } from 'element-plus';
import { computed, ref } from 'vue';
import { feeModelOptions } from '../constant'
import { useAuth } from '@/utils/auth'

const auth = useAuth()

interface Props {
  data?: any[],
  hiddenColumns?: Set<string>
}

const props = withDefaults(defineProps<Props>(), {
  data: () => [],
  hiddenColumns: () => new Set<string>()
})

const list = computed(() => {
  function getRowspan1(row) {
    let span = 0
    const list1 = row.bodyList || []
    list1.forEach(child1 => {
      const list2 = child1.shopList || []
      list2.forEach(() => {
        span++
      })
    })
    return span
  }

  const l = []
  props.data.forEach((child1, index1) => {
    const list1 = child1.bodyList || []
    const rowspan1 = getRowspan1(child1)
    let colspan1
    list1.forEach((chlid2, index2) => {
      const rowspan2 = chlid2.shopList ? chlid2.shopList.length : 1
      let colspan2
      const list2 = chlid2.shopList || []
      list2.forEach((child3, index3) => {
        l.push({
          ...child1,
          ...chlid2,
          ...child3,
          _index: index1 + 1,
          index1,
          index2,
          index3,
          rowspan1,
          colspan1: colspan1 ? 0 : colspan1 = 1,
          rowspan2,
          colspan2: colspan2 ? 0 : colspan2 = 1,
        })
        console.log(l);
      })
      // l.push({ ...item, ...chlid, rowspan, colspan, _index: cIndex + 1 })
    })
  });
  return l
})

const level1 = ['_index', 'customerLvl', 'customerLevel', 'customerName', 'customerNo', '_action']
const level2 = ['marketTypeName']
const spanMethod = ({ row, column }) => {
  if (level1.includes(column.property)) {
    return {
      rowspan: row.rowspan1,
      colspan: row.colspan1
    }
  } else if (level2.includes(column.property)) {
    return {
      rowspan: row.rowspan2,
      colspan: row.colspan2
    }
  }
}

const getFeeModel = (val) => {
  const d = feeModelOptions.find(v => v.value === val)
  return d && d.label
}

</script>
<style scoped lang="scss">
.list-table {
  :deep(.el-table__cell) {
    vertical-align: top;
  }

  :deep(.el-link) {
    display: inline;
  }

  :deep(.el-link__inner) {
    display: inline;
  }
}
</style>
